import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { inrement, decrement, incrementByAmount } from "./store/countSlice";
import { addList, getDoctorAsync } from "./store/doctorSlice";
function App() {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.counter.count);

  const doctorList = useSelector((state) => state.doctors.list);

  useEffect(() => {
    dispatch(
      getDoctorAsync({
        doctorName: "",
        doctorJob: "",
        doctorSex: "",
        limit: 5,
        page: 1,
      })
    );
  }, []);
  return (
    <>
      <h1> count: {count}</h1>
      <button
        type="button"
        onClick={() => {
          dispatch(inrement());
        }}
      >
        increment
      </button>
      <button
        type="button"
        onClick={() => {
          dispatch(decrement());
        }}
      >
        decrement
      </button>
      <button
        type="button"
        onClick={() => {
          // 使用有参数的action函数时，把payload的值，直接传就可以了。调用incrementByAmount(100)后，return action对象，即：{type:'incrementByAmount', :100  }
          dispatch(incrementByAmount(100));
        }}
      >
        increment 100
      </button>
      <h1>医生列表：</h1>
      <button
        type="button"
        onClick={() => {
          dispatch(addList({ did: 100, dname: "给我一百万" }));
        }}
      >
        添加医生
      </button>
      {doctorList.map((el) => (
        <div key={el.did}>{el.dname}</div>
      ))}
    </>
  );
}

export default App;
